jQuery

您所在的位置:网站首页 jquery 获取指定子元素 jQuery

jQuery

2024-07-12 20:28| 来源: 网络整理| 查看: 265

① $(this).next();        获取的是当前元素的下一个兄弟元素

②$(this).nextAll();       获取的是当前元素的后面的所有的兄弟元素

③$(this).prev();           获取的是当前元素的前一个兄弟元素

④$(this).prevAll();       获取的是当前元素的前面的所有的兄弟元素

⑤$(this).siblings();      获取的是当前元素的所有的兄弟元素(自己除外)

 

案例练习:

需求分析:鼠标进入文字,当前文字背景变红色,当点击时候,当前文字前面文字背景颜色变为黄色,后面文字背景颜色变为蓝色,当鼠标移出时,所有背景颜色取消

效果:

 

代码如下:

1 2 3 4 5 Title 6 7 ul { 8 list-style-type: none; 9 width: 200px; 10 margin: 100px auto; 11 } 12 13 ul li { 14 margin-top: 10px; 15 cursor: pointer; 16 text-align: center; 17 font-size: 20px; 18 } 19 20 21 22 //获取ul中所有的li,有鼠标进入事件,鼠标离开事件,点击事件 23 // $(function () { 24 // //获取ul->li 25 // $("ul>li").mouseenter(function () { 26 // $(this).css("backgroundColor","red").siblings().css("backgroundColor",""); 27 // }).mouseleave(function () { 28 // $(this).css("backgroundColor","").siblings().css("backgroundColor",""); 29 // }).click(function () { 30 // //当前元素前面的所有兄弟元素背景颜色为黄色 31 // //$(this).prevAll().css("backgroundColor","yellow"); 32 // //当前元素后面的所有兄弟元素背景颜色为蓝色 33 // //$(this).nextAll().css("backgroundColor","blue"); 34 // 35 // //链式编程代码 36 // //断链:对象调用方法,返回的不是当前的对象,再调用方法,调用不了, 37 // //解决断链--->恢复到断链之前的一个效果--修复断链 38 // //.end()方法恢复到断链之前的效果 39 // $(this).prevAll().css("backgroundColor","yellow").end().nextAll().css("backgroundColor","blue"); 40 // }); 41 // }); 42 43 $(function(){ 44 //链式编程 鼠标进入--鼠标点击--鼠标移出 45 //$("ul>li").mouseover().click().mouseout(); 46 $("ul>li").mouseover(function(){ 47 $(this).css("backgroundColor","red").siblings("li").css("backgroundColor",""); 48 }).click(function(){ 49 $(this).prevAll().css("backgroundColor","yellow"); 50 $(this).nextAll().css("backgroundColor","blue"); 51 }).mouseout(function(){ 52 $("ul>li").css("backgroundColor",""); 53 }); 54 }); 55 56 57 58 59 青岛啤酒(TsingTao) 60 瓦伦丁(Wurenbacher) 61 雪花(SNOW) 62 奥丁格教士(Franziskaner) 63 科罗娜喜力柏龙(Paulaner) 64 嘉士伯Kaiserdom 65 罗斯福(Rochefort) 66 粉象(Delirium) 67 爱士堡(Eichbaum) 68 哈尔滨牌蓝带 69 70 71 72

注意: 上述代码第49、50行可以压缩成一行,这样就引入了一个新的方法

end();作用是恢复短链。

原来两行代码:

$(this).prevAll().css("backgroundColor","yellow");

$(this).nextAll().css("backgroundColor","blue"); 

修改后代码:

 $(this).prevAll().css("backgroundColor","yellow").end().nextAll().css("backgroundColor","blue"); 



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3